<template>
  <MyDialog title="订单详情" :visible="showDialog" @close="close" @ok="close">
    <div v-loading="loading">
      <el-row :gutter="12">
        <el-col
          v-for="(item, index) in infoList"
          :key="index"
          :span="12"
          class="info"
        >
        <div class="term">
          {{ item.label }}：
        </div>
        <div class="detail">
          {{ item.value || "--" }}
        </div>
      </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="info">
          <div class="term">
            商品图片：
          </div>
          <div class="detail">
            <el-image
              v-if="picture"
              style="width: 100px; height: 100px"
              :src="getPicUrl(picture)"
              :preview-src-list="getPicUrlList(picture)"
            >
            </el-image>
            <span v-else>--</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </MyDialog>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
import { fetchOrderDetail } from "@/api/order";
export default {
  mixins: [dialogMixin],
  props: {
    orderId: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      picture: "",
      loading: false,
      infoList: [
        {
          label: "订单编号",
          key: "orderNo",
        },
        {
          label: "购买人姓名",
          key: "buyerName",
        },
        {
          label: "购买人电话",
          key: "buyerPhone",
        },
        {
          label: "订单状态",
          key: "statusText",
        },
        {
          label: "商品名称",
          key: "goodsName",
        },
        {
          label: "设备品牌名称",
          key: "brandName",
        },
        {
          label: "购买日期",
          key: "buyDate",
        },
        {
          label: "购买数量",
          key: "count",
        },
        {
          label: "购买价格",
          key: "purchasePrice",
        },
        {
          label: "订单总价",
          key: "totalPrice",
        },
        {
          label: "收货人姓名",
          key: "name",
        },
        {
          label: "收货人电话",
          key: "phone",
        },
        {
          label: "收货地址",
          key: "address",
        },
        {
          label: "详细地址",
          key: "detailAddress",
        },
      ],
    };
  },
  computed: {
    getPicUrl() {
      return (data) => {
        return JSON.parse(data)[0]?.absolutePath;
      };
    },
    getPicUrlList() {
      return (data) => {
        const arr = JSON.parse(data);
        if (Array.isArray(arr)) {
          return arr.map((item) => item.absolutePath);
        }
      };
    },
  },
  watch: {
    orderId(val) {
      if (val) {
        this.getOrderInfo();
      }
    },
  },
  methods: {
    getOrderInfo() {
      this.loading = true;
      fetchOrderDetail(this.orderId)
        .then((res) => {
          let data = res.data;
          data = { ...data, ...data.address };
          this.picture = data.picture;
          for (let item of this.infoList) {
            if (item.key === "address") {
              const { provinceName, cityName, districtName } = data;
              this.$set(item, "value", provinceName + cityName + districtName);
            } else {
              this.$set(item, "value", data[item.key]);
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  line-height: 36px;
  font-size: 14px;
  display: flex;
  .detail {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
